import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';

<Meta title="Styles/Design Tokens" />

Here's the place you can define your design system's design tokens. For inspiration, be sure to check out [Salesforce's Lightning Design System design tokens](https://www.lightningdesignsystem.com/design-tokens/).

## Colors

<br />

<ColorPalette>
  <ColorItem title="--color-default" subtitle="titles, buttons" colors={{ Black: '#000000' }} />
  <ColorItem title="--color-primary" subtitle="titles, buttons" colors={{ Fern: '#5cb85c' }} />
  <ColorItem
    title="--color-secondary-light"
    subtitle="icon hover"
    colors={{
      Orchid: '#D167CB',
      'Orchid Light': '#D167CB7F',
    }}
  />
  <ColorItem title="--color-secondary" subtitle="--" colors={{ Plum: '#9d439d' }} />
  <ColorItem
    title="--color-secondary-dark"
    subtitle="links, input outlines"
    colors={{ Plum: '#6e2c6e' }}
  />
  <ColorItem title="--color-error" subtitle="erro banner" colors={{ 'Red Berry': '#8B0000' }} />
</ColorPalette>

## Fonts

<br />

<ColorPalette>
  <ColorItem title="--font-size-small" subtitle="--" colors={{ small: '0.875rem' }} />
</ColorPalette>

## Borders

<br />

<ColorPalette>
  <ColorItem
    title="--border-radius"
    subtitle="input, banner"
    colors={{ 'Border Radius': '#6e2c6e' }}
  />
</ColorPalette>
